<template>
    <div v-loading="loading">
        <div class="m-b">
            <span class="m-r">总收入：<span style="color: red;">¥{{ withdrawInfo.order_pice }}</span></span>
            <span class="m-r">已提现余额：<span style="color: red;">¥{{ withdrawInfo.out_price }}</span></span>
            <span class="m-r">可提现余额：<span style="color: red;">¥{{ withdrawInfo.price }}</span></span>
        </div>
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-suffix="：">
            <el-form-item label="提现金额" prop="price">
                <el-input-number v-model="form.price" :min="0" :max="withdrawInfo.price" />
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    props: {
        id: {
            type: [Number, String],
            default: ''
        },
        withdrawInfo: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            loading: false,
            form: {
                id: this.id,
                price: 0
            },
            roleList: [],
            defaultProps: {
                label: 'title'
            },
            rules: {
                price: [{ required: true, message: '请输入提现金额', trigger: 'blur' }]
            }
        }
    },
    created() {
        this.getRoles()
    },
    mounted() {
        // if (this.form.id != '') {
        //     this.getInfo()
        // }
    },
    methods: {
        // getInfo() {
        //     this.loading = true
        //     this.$api.post('member/member/detail', { id: this.form.id }).then(res => {
        //         this.loading = false
        //         const data = res.data.data
        //         this.form.username = data.username
        //         this.form.nickname = data.nickname
        //         this.form.mobile = data.mobile
        //         this.form.avatar_url = data.avatar_url
        //         this.form.status = data.status
        //         this.form.role_id = data.role_id
        //         this.$refs.roleTree.setCheckedKeys(data.role_id)
        //     })
        // },
        submit(callback) {
            // if (this.form.id == '') {
            //     this.$refs['form'].validate(valid => {
            //         if (valid) {
            //             this.$api.post('member/member/create', this.form).then(() => {
            //                 this.$message.success({
            //                     message: '新增成功',
            //                     center: true
            //                 })
            //                 callback && callback()
            //             })
            //         }
            //     })
            // } else {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    this.$api.post('/member/cashout/create', this.form).then(() => {
                        this.$message.success({
                            message: '提现成功',
                            center: true
                        })
                        callback && callback()
                    })
                }
            })
            // }
        },
        getRoles() {
            this.$api.post('system/role/tabulation').then(res => {
                this.roleList = res.data.data
            })
        },
        handleCheckChange() {
            this.form.role_id = this.$refs.roleTree.getCheckedKeys()
        }
    }
}
</script>

<style lang="scss" scoped>
    // scss
    .role-box {
        padding: 5px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
    }
</style>
